import React from "react";
import axios from "axios";

export default class FetchUser extends React.Component {
    static defaultProps = {
        id: 9527,
    }
    state = {
        user: {},
    }

    getUser = () => {
        const { id } = this.props;
        axios.get(`https://xiaozhu.run/api/user/${id}`).then(resp => {
            this.setState({user: resp.data.data});
        });
    };

    componentDidMount() {
        this.getUser();

        // fetch('https://xiaozhu.run/api/user/9527').then(r => {
        //     r.json().then(resp => {
        //         console.log(resp)
        //         this.setState({ user: resp.data });
        //     })
        // })
    }

    componentDidUpdate(prevProps) {
        if(prevProps.id !== this.props.id) {
            this.getUser();
        }
    }


    render() {
        const { user } = this.state;
        return (
            <div>
                <p>ID：{user.id}</p>
                <p>Username: {user.username}</p>
            </div>
        )
    }
}